<template>
  <el-form-item
    :label="label"
    :label-width="labelWidth"
    :prop="props.data.field"
    :required="props.data.required"
    :rules="props.data.rules"
  >
    <el-table
      :data="props.data.initVal"
      stripe
      :border="props.data.border"
      :show-summary="props.data.summary"
      :sum-text="props.data.sumText"
      :max-height="`${props.data.maxHeight}px`"
      :cell-class-name="cellClassName"
      @cell-dblclick="onCellDBClick"
    >
      <el-table-column fixed="left" type="selection" width="55" />
      <el-table-column
        v-for="col in props.data.columns"
        :key="col.name"
        :fixed="col.fixed"
        :prop="col.name"
        :label="col.text"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-input
            v-if="state.editCellShow.rowIdx == scope.row.index && state.editCellShow.colIdx == scope.column.index"
            v-focus
            size="small"
            v-model="scope.row[scope.column.property]"
            @blur="onBlur"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="_col0_" fixed="right" class="opera">
        <template #default="scope">
          <el-icon :size="18" color="#90939999" @click="onRemove(scope)"><Remove /></el-icon>
        </template>
      </el-table-column>
    </el-table>
    <el-button plain size="small" :icon="Plus" @click="onAdd">添 加</el-button>
  </el-form-item>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ElFormItem, ElTable, ElTableColumn, ElInput, ElIcon } from 'element-plus'
import { Plus, Remove } from '@element-plus/icons-vue'
import { useProps } from '../../common-props/hooks'
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'

const props = defineProps<{ data: Record<string, any>; form: Record<string, any> }>()
const { label, labelWidth } = useProps(props)

const state = reactive({ editCellShow: { rowIdx: -1, colIdx: -1 } as any })

const onCellDBClick = (row: any, column: any) => {
  state.editCellShow.rowIdx = row.index
  state.editCellShow.colIdx = column.index
}
// const cellClassName = ({ row, column, rowIndex, columnIndex }: any) => {
//   row.index = rowIndex
//   column.index = columnIndex
// }
const cellClassName = (data: {
  row: any
  rowIndex: number
  column: TableColumnCtx<any>
  columnIndex: number
}): string => {
  data.row.index = data.rowIndex
  data.column.index = data.columnIndex
  return ''
}

const onBlur = () => {
  state.editCellShow.rowIdx = -1
  state.editCellShow.colIdx = -1
}
const onAdd = () => {
  const obj = {} as any
  const cols = props.data.columns
  for (let i = 0; i < cols.length; i++) {
    obj[cols[i].name] = cols[i].name
  }
  const data = props.data
  data.initVal.push(obj)
}
const onRemove = (scope: any) => {
  const data = props.data
  data.initVal.splice(scope.row.rowIndex, 1)
}
</script>

<style lang="scss" scoped>
:deep(.el-table__row) {
  .el-table__cell:last-child {
    .cell {
      display: flex;
      align-items: center;
      .el-icon:hover {
        color: $--color-info;
        cursor: pointer;
      }
    }
  }
}
</style>
